<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--网页图标标题-->
    <title>小米官网</title>
    <!--网页图标样式-->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <!--基础样式-->
    <link rel="stylesheet" href="./css/base.css">
    <!--公告样式-->
    <link rel="stylesheet" href="./css/common.css">
    <!--首页样式-->
    <link rel="stylesheet" href="./css/index.css">
    <title>Document</title>
</head>

<body>
    <!-- 快捷导航 -->
    <div class="shortcut">
        <div class="wrapper">
            <ul>
                <li><a href="#">小米网</a></li>
                <li><a href="#">MIUI</a></li>
                <li><a href="#">米聊</a></li>
                <li><a href="#">多看阅读</a></li>
                <li><a href="#">云服务</a></li>
                <li><a href="#">小米网移动版</a></li>
                <li><a href="#">问题反馈</a></li>
                <li><a href="#">Select Region</a></li>
            </ul>
        </div>
    </div>
    <!-- 头部 -->
    <div class="header wrapper">
        <!-- logo -->
        <div class="logo1"><img src="./images/logo.png" alt=""></div>
        <div class="logo"><img src="./images/new.gif" alt=""></div>

        <!-- 导航 -->
        <div class="nav">
            <ul>
                <li><a href="#">小米手机</a></li>
                <li><a href="#">红米</a></li>
                <li><a href="#">电视</a></li>
                <li><a href="#">盒子影音</a></li>
                <li><a href="#">路由器</a></li>
                <li><a href="#">智能硬件</a></li>
                <li><a href="#">服务</a></li>
                <li><a href="#">社区</a></li>
            </ul>
        </div>

    </div>
    <!-- 中上图片 -->
    <div class="banner">
        <div class="wrapper">
            <!-- 侧导航 ul -->
            <div class="subnav">
                <ul>
                    <li>
                        <div><a href="#" class="classify">手机</a><a href="#">平板</a><a href="#">电话卡</a></div>
                        <span class="iconfont icon-arrow-right-bold"></span>
                    </li>
                    <li>
                        <div><a href="#" class="classify">电视</a><a href="#">盒子</a></div>
                        <span class="iconfont icon-arrow-right-bold"></span>
                    </li>
                    <li>
                        <div><a href="#" class="classify">路由器</a><a href="#">智能硬件</a></div>
                        <span class="iconfont icon-arrow-right-bold"></span>
                    </li>
                    <li>
                        <div><a href="#" class="classify">移动电源</a><a href="#">插线板</a></div>
                        <span class="iconfont icon-arrow-right-bold"></span>
                    </li>
                    <li>
                        <div><a href="#" class="classify">耳机</a><a href="#">音响</a></div>
                        <span class="iconfont icon-arrow-right-bold"></span>
                    </li>
                    <li>
                        <div><a href="#" class="classify">电池</a><a href="#">存储卡</a></div>
                        <span class="iconfont icon-arrow-right-bold"></span>
                    </li>
                    <li>
                        <div><a href="#" class="classify">保护套</a><a href="#">后盖</a></div>
                        <span class="iconfont icon-arrow-right-bold"></span>
                    </li>
                    <li>
                        <div><a href="#" class="classify">贴膜</a><a href="#">其他配件</a></div>
                        <span class="iconfont icon-arrow-right-bold"></span>
                    </li>
                    <li>
                        <div><a href="#" class="classify">米兔</a><a href="#">服饰</a></div>
                        <span class="iconfont icon-arrow-right-bold"></span>
                    </li>
                    <li>
                        <div><a href="#" class="classify">箱包</a><a href="#">其他周边</a></div>
                        <span class="iconfont icon-arrow-right-bold"></span>
                    </li>
                </ul>
            </div>
            <!-- 图片 -->
            <ul class="pic">
                <li><a href="#"><img src="./images/banner.png" alt=""></a></li>
            </ul>
        </div>
    </div>

    <!-- 图片内容 -->
    <div class="wrapper">
        <div class="bd">
            <ul>
                <div class="add">
                    我就是一个空色块<br>
                    一言不合就这么任性
                </div>
                <li><a href="#"><img src="./images/pro1.png" alt=""></a></li>
                <li><a href="#"><img src="./images/pro2.png" alt=""></a></li>
                <li><a href="#"><img src="./images/pro3.png" alt=""></a></li>
            </ul>
        </div>
    </div>
    <!-- 智能硬件 -->
    <div class="fresh wrapper">
        <!-- 标题 -->
        <div class="title">
            <div class="left">
                <h3>智能硬件</h3>
            </div>
            <div class="right">
                <a href="#" class="more">查看全部<span class="iconfont icon-arrow-right-bold"></span></a>
            </div>
        </div>
        <!-- 内容 -->
        <div class="content">
            <div class="left">
                <a href="#"><img src="./images/girl.jpg" alt=""></a>

            </div>

            <div class="right">
                <ul>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./images/d1.jpg" alt=""></div>
                            <div class="txt">
                                <div class="info2">
                                    <h4>小米路由器3</h4>
                                </div>
                                <div class="info1">
                                    <p>四天线设计更安全更稳定</p>
                                </div>
                                <p class="price"><span>149元</span></p>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <div class="pic"><img src="./images/d2.jpg" alt=""></div>
                            <div class="txt">
                                <div class="info2">
                                    <h4>米家 LED 智能台灯</h4>
                                </div>
                                <div class="info1">
                                    <p>无可视频闪，亮度色温无极调节</p>
                                </div>
                                <p class="price"><span>169元</span></p>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <div class="pic"><img src="./images/d3.jpg" alt=""></div>
                            <div class="txt">
                                <div class="info2">
                                    <h4>小米净水器 厨下式</h4>
                                </div>
                                <div class="info1">
                                    <p>RO反渗透直出纯净水，包邮包安装</p>
                                </div>
                                <p class="price"><span>1999元</span></p>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="#"></a>
                        <div class="pic"><img src="./images/d4.jpg" alt=""></div>
                        <div class="txt">
                            <div class="info2">
                                <h4>小蚁智能摄像机 夜视版</h4>
                            </div>
                            <div class="info1">
                                <p>能看能听能说，手机远程观看</p>
                            </div>
                            <p class="price"><span>149元</span></p>
                        </div>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <div class="pic"><img src="./images/d5.jpg" alt=""></div>
                            <div class="txt">
                                <div class="info2">
                                    <h4>Yeelight床头灯
                                    </h4>
                                </div>
                                <div class="info1">
                                    <p>触摸式操作，给卧室1600万种颜色</p>
                                </div>
                                <p class="price"><span>249元</span></p>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <div class="pic"><img src="./images/d6.jpg" alt=""></div>
                            <div class="txt">
                                <div class="info2">
                                    <h4>小米空气净化器2</h4>
                                </div>
                                <div class="info1">
                                    <p>10分钟，房间空气焕然一新</p>
                                </div>
                                <p class="price"><span>699元</span></p>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <div class="pic"><img src="./images/d7.jpg" alt=""></div>
                            <div class="txt">
                                <div class="info2">
                                    <h4>小米智能安防套装</h4>
                                </div>
                                <div class="info1">
                                    <p>智能警戒，为您的家增添一份安心</p>
                                </div>
                                <p class="price"><span>169元</span></p>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <div class="pic"><img src="./images/d8.jpg" alt=""></div>
                            <div class="txt">
                                <div class="info2">
                                    <h4>米家iHealth血压计</h4>
                                </div>
                                <div class="info1">
                                    <p>爸妈上手就会用的智能血压计</p>
                                </div>
                                <p class="price"><span>399元</span></p>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
        <div class="wrapper">
            <!-- 帮助中心 -->
            <div class="help">
                <div class="left">
                    <dl>
                        <dt>帮助中心</dt>

                        <dd><a href="#">账户管理 </a></dd>

                        <dd><a href="#">购物指南</a></dd>

                        <dd><a href="#">订单操作</a></dd>

                    </dl>

                    <dl>
                        <dt>服务支持</dt>

                        <dd><a href="#">售后政策</a></dd>

                        <dd><a href="#">自助服务</a></dd>

                        <dd><a href="#">相关下载</a></dd>

                    </dl>

                    <dl>
                        <dt>线下门店</dt>
                        <dd><a href="#">小米之家</a></dd>

                        <dd><a href="#">服务网点</a></dd>

                        <dd><a href="#">零售网点</a></dd>

                    </dl>

                    <dl>
                        <dt>关于小米</dt>

                        <dd><a href="#">了解小米</a></dd>

                        <dd><a href="#">加入小米</a></dd>

                        <dd><a href="#">联系我们</a></dd>

                    </dl>

                    <dl>
                        <dt>关注我们</dt>

                        <dd><a href="#">新浪微博</a></dd>

                        <dd><a href="#">小米部落</a></dd>

                        <dd><a href="#">官方微信</a></dd>

                    </dl>
                    <dl>
                        <dt>特色服务</dt>

                        <dd><a href="#">F 码通道</a></dd>

                        <dd><a href="#">小米移动</a></dd>

                        <dd><a href="#">防伪查询</a></dd>

                    </dl>

                </div>
                <div class="right">
                    <ul>
                        <li>
                            <div class="req1">
                                <p>400-100-5678</p>
                            </div>
                            <div class="req3">
                                <p>周一至周日 8:00-18:00
                                </p>
                            </div>
                            <div class="req3">
                                <p>（仅收市话费）</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- 版权 -->
            <div class="copyright">
                <div class="bu1">
                    <img class="dibu" src="./images/logo.png" </div>
                    <div>
                        <p>小米网|MIUI|米聊|多看书城|小米路由器|视频电话|小米后院|小米天猫店|小米淘宝直营店|小米网盟|问题反馈|Select Region
                        </p>
                        <p>?mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号 </p>
                        <p>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
                        </p>
                    </div>
                </div>

            </div>

        </div>
        <div class="bootom wrapper">
            <div class="img">
                <img src="./images/bottom.png" alt="">
            </div>
        </div>

</body>

</html>